<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号" width="120">
        <template #default="scope">{{ scope.row.cid }}</template>
      </el-table-column>
      <el-table-column property="thing" label="代办事项" width="120" />
      <el-table-column
        property="date"
        label="建立时间"
        width="240"
        show-overflow-tooltip
      />
      <el-table-column property="complete_data" label="完成时间" />
      <el-table-column align="right" label="删除">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
     </el-table-column>

    </el-table>
  </template>

<script>
export default {
    data() {
        return {
            tableData:  [
                {
                    cid: '1',
                    thing: '阅读',
                    date: '2016-05-04',
                    complete_data: '',
                },
                {
                    cid: '2',
                    thing: '阅读',
                    date: '2017-05-04',
                    complete_data: '',
                },
                {
                    cid: '3',
                    thing: '吃喝',
                    date: '2016-06-06',
                    complete_data: '2016-11-25',
                },
                {
                    cid: '4',
                    thing: '嫖赌',
                    date: '2016-05-04',
                    complete_data: '2016-05-25',
                },
            ]
        }
    }
}
</script>